<!-- 自提点入驻 -->
<template>
	<view class="apply-commission-wrap page_box">
		<!-- 标题栏 -->
		<view class="head-box">
			<view class="nav-box"><cu-custom isBack></cu-custom></view>
		</view>
		<!-- 表单 -->
		<view class="apply-form content_box">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="姓名" prop="realname">
					<u-input placeholder="请输入姓名" :placeholderStyle="placeholderStyle" v-model="model.realname" type="text"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-position="left" label="手机号" prop="phone" label-width="150">
					<u-input placeholder="请输入手机号" :placeholderStyle="placeholderStyle" v-model="model.phone" type="number"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="申请名称" prop="name">
					<u-input placeholder="请输入申请名称" :placeholderStyle="placeholderStyle" v-model="model.name" type="text"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" prop="images" label="展示图片" label-position="top" label-width="150" :borderBottom="true">
					<u-upload
						:placeholderStyle="placeholderStyle"
						:showProgress="false"
						@on-uploaded="uploadSuccess($event, 'storeImg')"
						@on-remove="uploadRemove($event, 'storeImg')"
						:action="`${upLoadUrl}/api/common/upload`"
						:header="{token: token}"
						:file-list="model.fileImages"
						width="148"
						height="148"
						maxCount="1"
					></u-upload>
				</u-form-item>

				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="所在地区" prop="area_id">
					<u-input type="select" :select-open="pickerShow" v-model="model.area" placeholder="请选择地区" @click="pickerShow = true"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="详细地址" prop="address">
					<u-input
						type="textarea"
						disabled
						border
						placeholder="点击获取详细地址"
						:placeholderStyle="placeholderStyle"
						@click="chooseLocation"
						v-model="model.address"
					></u-input>
				</u-form-item>
				<view class="agreement x-f">
					<u-checkbox v-model="model.agreement" activeColor="#d90000" shape="circle" @change="onAgreement"></u-checkbox>
					<view class="agreement-text" @tap="jump('/pages/public/richtext', { id: protocolId })">
						勾选代表同意申请
						<text class="tcp">《申请协议》</text>
					</view>
				</view>
				<view class="x-c">
					<button class="cu-btn save-btn" @tap="onSubmit" :disabled="isFormEnd">
						<text v-if="isFormEnd" class="cuIcon-loading2 cuIconfont-spin"></text>
						确认提交
					</button>
				</view>
			</u-form>
		</view>
		<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
		<!-- 权限验证 -->
		<view class="auth-box cu-modal" :class="{ show: showNotice }">
			<view class="notice-box cu-dialog">
				<view class="img-wrap"><image class="notice-img" :src="authNotice.img" mode=""></image></view>
				<view class="notice-title">{{ authNotice.title }}</view>
				<view class="notice-detail">{{ authNotice.detail }}</view>
				<button class="cu-btn notice-btn" @tap="onAuthBtn(authNotice.btnPath)">{{ authNotice.btnText }}</button>
				<button class="cu-btn back-btn" @tap="$Router.back()">返回</button>
			</view>
		</view>
		<!-- mask -->
		<view class="cu-modal" v-if="introImage" :class="[{ show: showModal }]" cathctouchmove>
			<view class="cu-dialog" @tap.stop="showModal = false" style="background: none;overflow: visible;width: 750rpx;">
				<image style="width: 750rpx;" class="mask-img" :src="introImage" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
import { BASE_URL } from '@/env.js';
export default {
	components: {},
	data() {
		return {
			showModal: true,
			introImage: '',
			upLoadUrl: BASE_URL,
			showNotice: false,
			protocolId: 0,
			isFormEnd: false,
			authNotice: {
				//权限提示内容
				// img: this.$IMG_URL + 'ission/auth_check.png',
				// title: '正在审核中！',
				// detail: '请耐心等候',
				// btnText: '知道了'
			},
			// 表单
			errorType: ['message'],
			pickerShow: false,
			labelStyle: {
				'font-size': '28rpx',
				'font-weight': '500',
				color: '#333'
			},
			placeholderStyle: 'font-size: 28rpx;color:#c4c4c4;',
			model: {
				name: '', //自提点名称
				phone: '', //手机号
				realname: '', //真实姓名
				area_id: '', //行政区域ID
				address: '', //自提点地址
				latitude: '', //纬度
				longitude: '', //京都
				images: [], //自提点图片
				images_original: [],
				fileImages: [],
				agreement: false
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入申请名称',
						trigger: ['change', 'blur']
					}
				],
				realname: [
					{
						required: true,
						message: '请输入真实姓名',
						trigger: ['change', 'blur']
					}
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur']
					}
				],
				area: [
					{
						required: true,
						message: '请选择所在地区',
						trigger: ['change', 'blur']
					}
				],
				address: [
					{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur']
					}
				]
			},
			token: uni.getStorageSync('token')
		};
	},
	computed: {},
	onLoad() {
		this.getStoreInfo();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		hideWeekModal() {
			this.showWeeksModal = false;
		},
		// 弹窗按钮
		onAuthBtn(path) {
			if (path) {
				this.$Router.push({
					path: path
				});
			}
			this.showNotice = false;
		},

		// 上传图片成功
		uploadSuccess(e, type) {
			switch (type) {
				case 'storeImg':
					this.model.images = [];
					e.forEach(item => {
						this.model.images.push(item.response.data.url);
					});
					break;
				default:
					return;
			}
		},

		// 移除图片
		uploadRemove(index, type) {
			switch (type) {
				case 'storeImg':
					this.model.images.splice(index, 1);
					break;
				default:
					return;
			}
		},

		// 地址选择
		chooseLocation() {
			uni.authorize({
				scope: 'scope.userLocation'
			});
			uni.getSetting({
				success: res => {
					if (res.authSetting['scope.userLocation']) {
						uni.chooseLocation({
							success: res => {
								this.model.address = res.address;
								this.model.latitude = res.latitude;
								this.model.longitude = res.longitude;
							},
							fail: err => {
								console.log(err);
							}
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '检测到您已关闭定位权限，是否去开启？',
							success: res => {
								if (res.confirm) {
									uni.openSetting();
								}
							}
						});
					}
				}
			});
		},

		// 选择地区回调
		regionConfirm(e) {
			this.model.area = e.province.label + '-' + e.city.label + '-' + e.area.label;
			this.model.area_id = e.area.value;
		},

		// 勾选同意
		onAgreement(e) {
			this.model.agreement = e.value;
		},

		// 自提点详情
		getStoreInfo() {
			let that = this;
			that.$api('store.shopInfo').then(res => {
				if (res.code === 1) {
					res.data.apply && this.authStatus(res.data.apply);
					this.protocolId = res.data.config.protocol;
					this.introImage = res.data.config.intro_image;
				}
			});
		},

		// 初始化model
		initModel() {
			// 构建省市区
			if (this.model.province_name) {
				this.model.area = `${this.model.province_name}-${this.model.city_name}-${this.model.area_name}`;
			}
			if (this.model.images) {
				this.model.images.forEach(item => {
					this.model.fileImages.push({
						url: item
					});
				});
			}
			// 协议
			this.$set(this.model, 'agreement', false);
		},

		// 状态鉴权
		authStatus(data) {
			switch (String(data.status)) {
				case '0':
					this.showNotice = true;
					this.model = { ...this.model, ...data };
					this.initModel();
					this.authNotice = {
						img: this.$IMG_URL + 'ission/auth_check.png',
						title: '正在审核中',
						detail: data.msg,
						btnText: '修改信息',
						btnPath: ''
					};
					break;
				case '-1':
					this.showNotice = true;
					this.model = { ...this.model, ...data };
					this.initModel();
					this.authNotice = {
						img: this.$IMG_URL + 'ission/auth_reject.png',
						title: '您的申请已被驳回！',
						detail: data.msg,
						btnText: '重新申请',
						btnPath: ''
					};
					break;
				case '1':
					this.showNotice = false;
					break;

				default:
			}
		},

		// 申请自提点
		applyStore() {
			let that = this;
			this.isFormEnd = false;
			that.$api('store.apply', that.model).then(res => {
				if (res.code === 1) {
					this.isFormEnd = true;
					//  #ifdef MP-WEIXIN
					this.$store.dispatch('getMessageIds', 'storeApply');
					//  #endif
					uni.showToast({
						title: res.msg,
						success: () => {
							that.$Router.back();
						}
					});
				}
			});
		},

		// 提交
		onSubmit() {
			let that = this;
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if (!this.model.agreement) return this.$u.toast('请勾选协议');
					this.applyStore();
				} else {
					this.$u.toast('请完善表单');
				}
			});
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		}
	}
};
</script>

<style lang="scss">
// 遮罩说明

.apply-commission-wrap {
	height: 100%;
	background-color: #fff;
	.head-box {
		background: url($IMG_URL+'/user/qz_store_apply_head_bg.jpg') no-repeat;
		background-size: 100% auto;
		height: 370rpx;
	}
}
.nav-box {
	/deep/ .cu-back {
		color: #fff;
		font-size: 40rpx;
	}
}
// 表单
.apply-form {
	width: 750rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	.agreement {
		margin-top: 20rpx;
		.agreement-text {
			font-size: 24rpx;
			font-weight: 500;
			color: #999;
			.tcp {
				color: $t-mainColor;
			}
		}
	}
	.save-btn {
		width: 616rpx;
		height: 86rpx;
		background: linear-gradient(to right, $t-gradualColor, $t-mainColor);
		border-radius: 43rpx;
		font-weight: 500;
		color: #ffffff;
		margin: 30rpx 0;
	}
}

.auth-box {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	z-index: 99;
	.notice-box {
		position: fixed;
		z-index: 1111;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		top: 50%;
		left: 50%;
		width: 612rpx;
		min-height: 658rpx;
		background: #ffffff;
		padding: 30rpx;
		border-radius: 20rpx;
		transform: translate(-50%, -50%);
		.img-wrap {
			margin-bottom: 50rpx;
			.notice-img {
				width: 180rpx;
				height: 170rpx;
			}
		}
		.notice-title {
			font-size: 35rpx;
			font-weight: bold;
			color: #46351b;
			margin-bottom: 28rpx;
		}
		.notice-detail {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
			margin-bottom: 50rpx;
		}
		.notice-btn {
			width: 492rpx;
			height: 70rpx;
			background: linear-gradient(-90deg, #a36fff, #5336ff);
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			margin-bottom: 10rpx;
		}
		.back-btn {
			width: 492rpx;
			height: 70rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #c5b8fb;
			background: none;
		}
	}
}
</style>
